<template>
	<view class="findCaseDetails">
		<view class="cover">
			<image :src="casedetail.img"></image>
		</view>

		<view class="conterRow">

			<!-- 案例信息 -->
			<view class="info">
				<view class="price">
					工程造价
					<text>¥{{casedetail.price}}&nbsp;万元</text>
				</view>
				<view class="title">
					{{casedetail.title}}
				</view>
				  
				<view class="tags" v-if="casedetail">
					<view class="tag" v-if="casedetail.type_text ">{{casedetail.type_text}}</view>

					<view class="tag" v-if="casedetail.cat_name ">{{casedetail.cat_name}}</view>

					<view class="tag" v-if="casedetail.area ">{{casedetail.area + 'm²'}}</view>
						
						<view class="tag" v-for="ite in casedetail.styleArr" :key="ite">{{ite}}</view>

					<view class="tag" v-if="casedetail.soft ">{{casedetail.soft==1?'包含软装':'不包含软装'}}</view>

					<view class="tag" v-if="casedetail.type_text ">{{casedetail.type_text}}</view>
				</view>


				<view class="desc" v-if="casedetail.desc">
					<text class="label">案例描述</text>
					<text class="conter">{{casedetail.desc}}</text>
				</view>


				<view class="caseimage" style="margin-top: 10rpx;">
					<text>设计方案</text>
					<view v-for="item in casedetail.content" :key="item.id" class="for">
						<view class="case_tuzi">
							<up-lazy-load :image="item" img-mode='widthFix'></up-lazy-load>
						</view>
					</view>
					<view v-for="item2 in casedetail.imgs" :key="item2.id" class="for">
						<view class="tltles" v-if="item2.space_type_text">
							{{ item2.space_type_text }}
						</view>
						<view class="case_tuzi">
							<up-lazy-load :image="item2.img" img-mode='widthFix'></up-lazy-load>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="bottomFexBtn">
				<view class="rowConter">

					<!-- <view class="row">
						<view class="icon" @click="nullClick">
							<view class="iconRow">
								<image src="../../../static/home/sc.png"> </image>
							</view>
							<text>收藏</text>
						</view>
					</view> -->


					<view class="row">
						<view class="icon">
							<view class="iconRow">
								<image src="../../../static/home/fx.png"> </image>
							</view>
							<text>分享</text>

							<button open-type="share" class="shareBtn">分享</button>
						</view>
					</view>


					<!-- <view class="row">
						<view class="icon" @click="nullClick">
							<view class="iconRow">
								<image src="../../../static/home/zx.png"> </image>
							</view>
							<text>咨询</text>
						</view>
					</view> -->
					<!-- <view class="row">
						<view class="btn" @click="nullClick">
							预约设计
						</view>
					</view> -->
					<view class="row">
						<view class="icon" @click="tips">
							<view class="iconRow">
								<image src="../../../static/home/xz.png"> </image>
							</view>
							<text>预约须知</text>
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		detailsData
	} from '@/api/findCases.js';
	import {
		ref,
		onMounted,
		defineExpose,
		watch
	} from 'vue';
	import {
		onLoad,
		onReady,
		onShow,
		onHide,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'


	const id = ref(null);
	const detailsObj = ref({})
	const casedetail = ref({})
	onLoad((option) => {
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
		if (option.id) {
			id.value = option.id;
		}
	})
	onHide(() => {
		uni.setStorageSync('isShare', '1');
	})
	onMounted(() => {
		queryDetails()
	});
	//发送给朋友
	onShareAppMessage((res) => {
		if (casedetail.value) {
			const url = '/pages/find/findCaseDetails/index?share=1&id=' + id.value;
			return {
				title: casedetail.value.title,
				type: 0,
				imageUrl:casedetail.value.img,
				// imageUrl: 'https://img.zhizhuangtong.com/project_media/img/xcx/khd/homeShare.jpeg',
				path: url,
			};
		}
	});
	//分享到朋友圈
	onShareTimeline((res) => {

		if (casedetail.value) {
			const url = '/pages/find/findCaseDetails/index?share=1';
			return {
				title: casedetail.value.title,
				type: 0,
				path: url,
				imageUrl:casedetail.value.imsg,
				// imageUrl: 'https://img.zhizhuangtong.com/project_media/img/xcx/khd/homeShare.jpeg',
				query: {
					id: id.values,
				},
				// summary: casedetail.value.desc,
				// imageUrl: casedetail.value.img
			}
		}
	})


	const tips = () => {
		wx.showToast({
			title: '预约设计需要付费，预约后设计师将上门现场设计！',
			icon: 'none',
			duration: 2000
		});
	}
	const nullClick = () => {
		wx.showToast({
			title: '正在开发中！',
			icon: 'none',
			duration: 2000
		});
	}


	// 详情数据
	const queryDetails = async () => {
		const res = await detailsData({
			id: id.value
		});
		if (res.code === 1) {
			console.log(res.data)
			detailsObj.value = res.data
			casedetail.value = res.data.case
			// case_list.value = res.data.case_list;
		}
	}
</script>

<style scoped lang="less">
	.findCaseDetails {
		width: 100%;

		.cover {
			height: 400rpx;
			width: 100%;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.conterRow {
			min-height: calc(100vh - 400rpx);
			padding: 20rpx;
			position: relative;
			box-sizing: border-box;
			background-color: #FFFFFF;



			.info {
				padding-bottom: 15rpx;
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				box-sizing: border-box;

				.price {
					width: 100%;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin: 10rpx 0;

					text {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 34rpx;
						color: #CCA05F;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}

				.title {
					width: 100%;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					line-height: 30rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin: 15rpx 0 20rpx;
				}

				.tags {
					display: flex;
					width: 100%;
					padding: 20rpx 0 30rpx;

					.tag {
						margin-left: 10rpx;
						padding: 8rpx 12rpx;
						background: #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 8rpx;
						border: 1rpx solid #EAC285;
						color: #EAC285;

						&:first-child {
							margin-left: 0;
						}
					}
				}

				.desc {
					padding: 35rpx 0;
					border-top: 1rpx solid #E4E4E4;
					border-bottom: 1rpx solid #E4E4E4;
					box-sizing: border-box;
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					.label {
						width: 100%;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-bottom: 15rpx;
					}

					.conter {
						width: 100%;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
						line-height: 45rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}


				.caseimage {
					width: 100%;
					padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));
					padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
					box-sizing: border-box;

					.for {
						width: 100%;
						padding: 30rpx 0;

						.tltles {
							margin-bottom: 30rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 30rpx;
							color: #000000;
							line-height: 30rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}

					text {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					image {
						width: 100%;
					}
				}


			}


			.bottomFexBtn {
				position: fixed;
				left: 0;
				bottom: 0;
				z-index: 5;
				padding-bottom: env(safe-area-inset-bottom);
				padding-bottom: constant(safe-area-inset-bottom);
				height: calc(120rpx + env(safe-area-inset-bottom));
				height: calc(120rpx + constant(safe-area-inset-bottom));
				width: 100%;
				// background-color: #000000 !important;
				backdrop-filter: blur(10px) !important;
				background-color: rgba(255, 255, 255, .82) !important;
				box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
				box-sizing: border-box;
				display: flex;
				align-items: flex-start;

				.rowConter {
					padding: 15rpx 25rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.row {
						display: flex;
						justify-content: center;
						align-items: center;

						.icon {
							display: flex;
							flex-wrap: wrap;
							align-content: center;
							position: relative;

							.shareBtn {
								// border: 1px solid red;
								position: absolute;
								left: 0;
								top: 0;
								width: 100%;
								height: 100%;
								opacity: 0;
							}

							.iconRow {
								width: 100%;
								display: flex;
								justify-content: center;
								margin-bottom: 5rpx;

								image {
									width: 50rpx;
									height: 50rpx;
								}
							}

							text {
								display: block;
								width: 100%;
								text-align: center;
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								font-size: 20rpx;
								color: #666666;
								line-height: 40rpx;
								font-style: normal;
								text-transform: none;
							}
						}

						.btn {
							width: 320rpx;
							height: 80rpx;
							background: linear-gradient(113deg, #F2BD6F 0%, #CCA05F 100%);
							border-radius: 50rpx 50rpx 50rpx 50rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 32rpx;
							color: #FFFFFF;
							line-height: 80rpx;
							text-align: center;
							font-style: normal;
							text-transform: none;
						}


					}
				}
			}
		}
	}
</style>